<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/vue_basic/js/vue.js"></script>
    <style>
        /* .tab{
            border: 1px;
        } */
    </style>
</head>
<body>
    <div id="root">
        <!-- 此处不知道为什么table必须在外面嵌套一个template否则也会报错 -->
        <div v-if="bookData.length > 0">购物车
            <template>
                <table class="tab">
                <!-- <table border="1">  -->
                    <th> 序号
                        <!-- <td>序号</td> -->
                        <td>书籍名称</td> 
                        <td>出版日期</td> 
                        <td>价格</td>
                        <td>购买数量</td>
                        <td>操作</td>
                    </th> 
                    <tr v-for="(item,index) in bookData" ::key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date}}</td>
                        <td>{{item.price.toFixed(2)}}</td>
                        <td>
                            <button @click="subtract(item)" :disabled="!item.number">-</button>
                            {{item.number}}
                            <button @click="add(item)">+</button>
                        </td>
                        <td><button @click="remove(index)">移除</button></td>
                    </tr> 
                </teble>
            </template>
            <div>总价:￥{{sum}}</div>
        </div>
        <p v-else>购物车为空</p>

        
        
    </div>
    <script src="./main.js"></script>
    <!-- css样式不能使用script标签引用,必须使用link,否则会报错 -->
    <link rel="stylesheet" href="./YangShi.css">

</body>

</html>